<template>
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm card-box loginform">
    <h3 class="title">系统登录</h3>
    <el-form-item prop="account">
      <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="checkPass">
      <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-checkbox v-model="checked" checked style="margin:0px 0px 35px 0px;">记住密码</el-checkbox>
    <el-form-item style="width:100%;">
      <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit">登录</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
    export default {
        data() {
            return {
                ruleForm2: {
                    account: '',
                    checkPass: ''
                },
                checked: true,
                rules2: {
                    account: [{
                        required: true,
                        message: '请输入登录名',
                        trigger: 'focus'
                    }],
                    checkPass: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'focus'
                    }]

                }
            }
        },
        methods: {
            handleSubmit(ev) {
                this.$refs.ruleForm2.validate((valid) => {
                    if (valid) {
                        
                        this.$store.commit('changeLogin')
                        this.$router.replace('/costanalyse')
                            // $.ajax({
                            //     type: 'post',
                            //     url: 'http://192.168.140.25:5000',
                            //     dataType: 'json',
                            //     crossDomain: true,
                            //     error: function(request) {
                            //         alert('连接错误');
                            //     },
                            //     success: function(retdata) {
                            //         document.cookie = "user=" + retdata[0].;
                            //         this.$store.commit('changeLogin')
                            //         this.$router.replace('/costanalyse')
                            //     }
                            // });

                    }
                });
            },
            login: function() {

                this.$store.commit('changeLogin')
                this.$router.replace('/costanalyse')
            }
        }
    }
</script>
<style>
    .card-box {
        padding: 20px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin-bottom: 20px;
        background-color: #F9FAFC;
        margin: 120px auto;
        width: 400px;
        border: 2px solid #8492A6;
    }
    
    .title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
    }
    
    .loginform {
        width: 350px;
        padding: 35px 35px 15px 35px;
    }
</style>